<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background-color: rgb(138, 219, 237);
    }

    .lsdy {
      width: 509px;
      height: 270px;
      margin: 100px auto;
      background: url(../照骗/2024-1024-动画素材/鲨鱼.png) left top;
      animation: lsdyRun 1s steps(8) infinite;
      display: inline-block;
    }

    .lsdyBox {
      width: 509px;
      height: 270px;
      animation: lsdyBoxRun 20s linear infinite;
      display: inline-block;
    }

    @keyframes lsdyRun {
      0% {}

      100% {
        background-position: left -2160px;
      }
    }

    @keyframes lsdyBoxRun {
      0% {
        transform: translateX(-600px);
      }

      100% {
        transform: translateX(3000px);
      }
    }

    .dly {
      width: 175px;
      height: 125px;
      margin: 100px auto;
      background: url(../照骗/2024-1024-动画素材/灯笼鱼.png) left top;
      animation: dlyRun 1s steps(8) infinite;
      display: inline-block;
    }

    .dlyBox {
      width: 175px;
      height: 125px;
      animation: dlyBoxRun 15s linear infinite;
      display: inline-block;
    }

    @keyframes dlyRun {
      0% {}

      100% {
        background-position: left -1000px;
      }
    }

    @keyframes dlyBoxRun {
      0% {
        transform: translateX(-500px) translateY(-140px);
      }

      25% {
        transform: translateX(300px) translateY(-140px) rotate(90deg);
      }

      50% {
        transform: translateX(300px) translateY(500px) rotate(180deg);
      }

      75% {
        transform: translateX(-500px) translateY(500px) rotate(180deg);
      }

      100% {
        transform: translateX(-500px) translateY(-140px) rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div class="lsdyBox">
    <div class="lsdy"></div>
  </div>
  <div class="dlyBox">
    <div class="dly"></div>
  </div>
</body>

</html>